<template>
  <div class="box">
    <div class="title"> 接入应用</div>
    <div class="cardUl">
      <div v-for="(item,index) in dataList" :key="index" class="cardLi">
        <div class="carImg"><img src="/img/img_rwx.jpg" alt=""></div>
        <div class="carRight">
          <div class="firmName">{{ item.name }}</div>
          <div class="fontFine">
            <div>ERP名称：</div>
            <div>辉煌系列</div>
          </div>
          <div class="versions">
            <div>版本号：</div>
            <div>v13.0.0</div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          name: '成都任我行股份有限公司',
          ERPname: 'ERP名称1111',
          versions: '2.34'
        },
        {
          name: '厂商1',
          ERPname: 'ERP名称1111',
          versions: '1.2.3'
        },
        {
          name: '厂商1',
          ERPname: 'ERP名称1111',
          versions: '3.66'
        },
        {
          name: '厂商1',
          ERPname: 'ERP名称1111',
          versions: '1.36'
        },
        {
          name: '厂商1',
          ERPname: 'ERP名称1111',
          versions: '1.36'
        },
        {
          name: '厂商1',
          ERPname: 'ERP名称1111',
          versions: '1.36'
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
  .box{
    background-color: #fff;
    .title{
      font-size: 15px;
      color: #4f565f;
      border-bottom: 4px solid #f5f5f5;
      padding: 20px 0 16px 35px;
      font-weight: 600;
    }
  }
  .cardUl{
    width: 100%;
    text-decoration: none;
    list-style: none;
    padding: 0;
    display: flex;
    flex-flow: wrap;
    .cardLi{
      width: 370px;
      height: 96px;
      background-color: #f7f8fa;
      margin: 25px;
      .carImg{
      float: left;
      width: 65px;
      height: 65px;
      margin: 15px 23px;
      }
      .carRight{
        float: left;
        margin: 15px 0px;
        .firmName{
          font-size: 15px;
          color: #212020;
          font-weight: 600;
        }
        .fontFine{
          display: flex;
          font-size: 14px;
          margin: 7px 0px;
        }
        .versions{
          display: flex;
          font-size: 14px;
          color: #888;
        }
      }
    }
  }
  .fontFine{
    font-weight: 400;
  }
</style>
